import { useInitState } from '@/hooks/useInitState'
import {
  getUserProfile,
  logout,
  updateUserPhoto,
  updateUserProfile,
} from '@/store/actions/profile'
import {
  Button,
  List,
  DatePicker,
  NavBar,
  Popup,
  Toast,
  Dialog,
} from 'antd-mobile'
import classNames from 'classnames'
import dayjs from 'dayjs'
import { useRef, useState } from 'react'
import { useDispatch } from 'react-redux'
import { useHistory } from 'react-router-dom'
import EditInput from '../EditInput'
import EditList from '../EditList'
import styles from './index.module.scss'

const Item = List.Item

type Popup1StateType = {
  type: '' | 'name' | 'intro'
  visible: boolean
}

type Popup2StateType = {
  type: '' | 'photo' | 'gender'
  visible: boolean
}

const ProfileEdit = () => {
  const history = useHistory()

  const dispatch = useDispatch()

  // const userProfile = useSelector<RootState, UserProfile>((state) => {
  //   return state.profile.userProfile
  // })

  // useEffect(() => {
  //   // getUserProfile函数返回一个获取用户详情的异步action
  //   dispatch(getUserProfile())
  // }, [dispatch])

  const userProfile = useInitState(getUserProfile).profile.userProfile

  const [popup1State, setPopup1State] = useState<Popup1StateType>({
    // ''   'name'  'intro'
    type: '', // 区分编辑昵称 简介
    visible: false,
  })

  const [popup2State, setPopup2State] = useState<Popup2StateType>({
    type: '', // 'photo' 'gender'
    visible: false,
  })

  const fileRef = useRef<HTMLInputElement>(null)

  const [showDatePicker, setShowDatePicker] = useState(false)

  return (
    <div className={styles.root}>
      <div className="content">
        {/* 标题 */}
        <NavBar
          style={{
            '--border-bottom': '1px solid #F0F0F0',
          }}
          onBack={() => {
            history.go(-1)
          }}
        >
          个人信息
        </NavBar>

        <div className="wrapper">
          {/* 列表 */}
          <List className="profile-list">
            {/* 列表项 */}
            <Item
              onClick={() => {
                setPopup2State({
                  type: 'photo',
                  visible: true,
                })
              }}
              extra={
                <span className="avatar-wrapper">
                  <img width={24} height={24} src={userProfile.photo} alt="" />
                </span>
              }
              arrow
            >
              头像
            </Item>
            <Item
              arrow
              extra={userProfile.name}
              onClick={() => {
                setPopup1State({
                  type: 'name',
                  visible: true,
                })
              }}
            >
              昵称
            </Item>
            <Item
              onClick={() => {
                setPopup1State({
                  visible: true,
                  type: 'intro',
                })
              }}
              arrow
              extra={
                <span className={classNames('intro', 'normal')}>
                  {userProfile.intro || '未填写'}
                </span>
              }
            >
              简介
            </Item>
          </List>

          <List className="profile-list">
            <Item
              onClick={() => {
                setPopup2State({
                  type: 'gender',
                  visible: true,
                })
              }}
              arrow
              extra={userProfile.gender === 0 ? '男' : '女'}
            >
              性别
            </Item>
            <Item
              onClick={() => setShowDatePicker(true)}
              arrow
              extra={userProfile.birthday}
            >
              生日
            </Item>
          </List>

          {/* 
            DatePicker组件：
              visible 显示隐藏
              value 设置默认的选中时间
              title 标题
              max 最大时间
              min 最小时间
              onClose 确认和取消时都会触发
              onConfirm 确认时触发
          */}
          <DatePicker
            visible={showDatePicker}
            value={new Date(userProfile.birthday)}
            title="选择生日"
            min={new Date('1990-01-01')}
            max={new Date()}
            onClose={() => {
              // 确认和取消时都会触发关闭事件
              setShowDatePicker(false)
            }}
            onConfirm={async (val) => {
              // 确认时触发
              // console.log('确认了', val)
              // '2022-09-06' 后端需要时间字符串
              const time = dayjs(val).format('YYYY-MM-DD')

              await dispatch(
                updateUserProfile({
                  birthday: time,
                })
              )

              Toast.show('生日更新成功')
              // setShowDatePicker(false)
            }}
          />
        </div>

        <div className="logout">
          <Button
            className="btn"
            onClick={() => {
              Dialog.show({
                // title: '温馨提示',
                content: '确认退出么？',
                // 点击任意按钮 都会关闭dialog
                closeOnAction: true,
                actions: [
                  [
                    {
                      key: 'cancel',
                      text: '取消',
                    },
                    {
                      key: 'confirm',
                      text: '确认',
                      bold: true,
                      danger: true,
                      // onClick: () => {
                      //   console.log('我要退出。。。')
                      // },
                    },
                  ],
                ],
                // 配置按钮的统一点击行为
                onAction: async (action, index) => {
                  // console.log(action, index)
                  if (index === 1) {
                    // 点击确认
                    // console.log('退出')

                    // 封装一个logout函数 返回一个action函数  清空信息
                    await dispatch(logout())
                    // 回到登录页
                    history.push('/login')
                  }
                },
              })
            }}
          >
            退出登录
          </Button>
        </div>

        {/* 弹出层1：编辑昵称,简介 */}
        {/* popup默认隐藏是样式上的 不是卸载了！！添加destroyOnClose 就会关闭时卸载组件 */}
        <Popup
          destroyOnClose
          visible={popup1State.visible}
          position="right"
          bodyStyle={{ width: '100vw' }}
        >
          <EditInput
            update={async (val, type) => {
              // 父组件想要实现什么需求 看他自己； 子组件只负责收集数据 传给你，这样更加灵活
              // console.log(val, type)
              // let obj = {}
              // obj[type] = val
              await dispatch(
                updateUserProfile({
                  [type]: val,
                })
              )

              Toast.show({
                content: '修改成功',
                icon: 'success',
              })

              setPopup1State({
                visible: false,
                type: '',
              })
            }}
            type={popup1State.type}
            closePopup={() => {
              setPopup1State({
                type: '',
                visible: false,
              })
            }}
          ></EditInput>
        </Popup>

        {/* 弹出层2: 编辑性别 头像 */}
        <Popup
          onMaskClick={() => {
            // 点击了灰色遮罩 执行
            setPopup2State({
              visible: false,
              type: '',
            })
          }}
          visible={popup2State.visible}
          position="bottom"
          destroyOnClose
        >
          <EditList
            type={popup2State.type}
            update={async (val, type) => {
              // console.log(val, type)

              if (type === 'gender') {
                // 修改性别
                await dispatch(
                  updateUserProfile({
                    gender: val,
                  })
                )

                Toast.show('修改性别成功')
                setPopup2State({ visible: false, type: '' })
              } else {
                // 修改头像
                // console.log('修改头像')
                // 打开文件选择框  模拟点击
                fileRef.current!.click()
              }
            }}
            close={() => {
              setPopup2State({
                visible: false,
                type: '',
              })
            }}
          ></EditList>
        </Popup>

        {/* 准备文件选择框 隐藏的 */}
        <input
          type="file"
          hidden
          ref={fileRef}
          onChange={async (e) => {
            // console.log('选择了文件', e.target.files![0])
            // 用户选择的那张图片
            const file = e.target.files![0]

            // 请求接口 上传到服务器  格式必须是FormData

            const formData = new FormData()
            // formData.append('name','zs')
            formData.append('photo', file)

            // 带着formData去请求接口  就可以上传头像
            await dispatch(updateUserPhoto(formData))

            Toast.show('更新头像成功')
            setPopup2State({ visible: false, type: '' })

            // const obj = {}
            // obj.name = 'zs'
          }}
        />
      </div>
    </div>
  )
}

export default ProfileEdit
